import React, { useState } from 'react'
import { RiAlibabaCloudFill } from '@remixicon/react'
import { Button } from '@/library/gallery/components/Button'
import List from '@/library/gallery/components/List'
import { Space } from '@/library/gallery/components/Space'
import { Switch } from '@/library/gallery/components/Switch'
import Dialog from '@/library/gallery/components/Dialog'
import { DemoBlock } from '@/library/widgets/DemoBlock'
import { Divider } from '@/library/gallery/components/Divider'

export const sleep = <T extends number = number>(time: T): Promise<T> => new Promise((resolve) => {
  setTimeout(resolve, time)
})

export default (): React.ReactElement => {
  const BaseUsedOne = () => {
    const [visible, setVisible] = useState(false)
    const [closeOnMaskClick, setCloseOnMaskClick] = useState(false)
    const [disabled, setDisabled] = useState(false)
    const renderContent = (): React.ReactNode => {
      if (disabled) {
        return '按钮已禁用'
      }
      if (closeOnMaskClick) {
        return '点击蒙层关闭~'
      }
      return '请点击按钮关闭弹窗!!!!!!'
    }
    return (
      <>
        <Space justify="between" block align="center">
          <Button
            block
            onClick={() => {
              setVisible(true)
            }}
          >
            显示对话框
          </Button>
          <Space direction="vertical">
            <Space block align="center">
              是否禁用按钮
              <Switch checked={disabled} onChange={(v) => setDisabled(v)} />
            </Space>
            <Space block align="center">
              点击蒙层是否关闭
              <Switch checked={closeOnMaskClick} onChange={(v) => setCloseOnMaskClick(v)} />
            </Space>
          </Space>
        </Space>
        <Dialog
          visible={visible}
          closeOnMaskClick={closeOnMaskClick}
          content={renderContent()}
          closeOnAction
          onClose={() => {
            setVisible(false)
          }}
          actions={[
            {
              key: 'confirm',
              text: '我知道了',
              pattern: 'success',
              bold: true,
              disabled,
            },
          ]}
        />
      </>
    )
  }

  const BaseUsedTwo = () => {
    const [visible, setVisible] = useState(false)
    const [closeOnMaskClick, setCloseOnMaskClick] = useState(false)
    const [canClickCancle, setCanClickCancle] = useState(true)
    return (
      <>
        <Space justify="between" block align="center">
          <Button
            block
            onClick={() => {
              setVisible(true)
            }}
          >
            异步操作执行
          </Button>
          <Space align="center">
            点击蒙层是否关闭
            <Switch checked={closeOnMaskClick} onChange={(v) => setCloseOnMaskClick(v)} />
          </Space>
        </Space>
        <Dialog
          title="佛说"
          visible={visible}
          closeOnMaskClick={closeOnMaskClick}
          content="山前没相见，山后不相逢。啦啦啦啦啦啦啦啦"
          closeOnAction
          onClose={() => {
            setVisible(false)
          }}
          onAction={async (action, index) => { console.info(action, index, '==== OnAction ====') }}
          actions={[[
            {
              key: 'cancle',
              text: '取消',
              pattern: 'default',
              disabled: !canClickCancle,
              onClick: () => {
                console.info('==== 已取消 ====')
              },
            },
            {
              key: 'submit',
              text: '确定',
              onClick: async () => {
                setCanClickCancle(false)
                await sleep(2000)
                setCanClickCancle(true)
              },
            },
          ]]}
        />
      </>
    )
  }

  const BaseUsedThr = () => {
    const [visible, setVisible] = useState(false)
    const [closeOnMaskClick, setCloseOnMaskClick] = useState(false)
    return (
      <>
        <Space justify="between" block align="center">
          <Button
            block
            onClick={() => {
              setVisible(true)
            }}
          >
            自定义按钮
          </Button>
          <Space block align="center">
            点击蒙层是否关闭
            <Switch checked={closeOnMaskClick} onChange={(v) => setCloseOnMaskClick(v)} />
          </Space>
        </Space>
        <Dialog
          visible={visible}
          closeOnMaskClick={closeOnMaskClick}
          image="https://gw.alipayobjects.com/mdn/rms_efa86a/afts/img/A*SE7kRojatZ0AAAAAAAAAAAAAARQnAQ"
          content="山前没相见，山后别相逢 你说对不对？山前没相见，山后别相逢 你说对不对？"
          header={(
            <RiAlibabaCloudFill
              style={{
                color: 'var(--rt-color-warning)',
              }}
            />
          )}
          closeOnAction
          onClose={() => {
            setVisible(false)
          }}
          actions={[{
            key: 'online',
            text: '在线阅读',
          },
          {
            key: 'download',
            text: '下载文件',
          }, [
            {
              key: 'cancle',
              text: '取消',
            },
            {
              key: 'submit',
              text: '确定',
            },
          ]]}
        />
      </>
    )
  }

  const BaseUsedFour = () => {
    const [visible, setVisible] = useState(false)
    const [closeOnMaskClick, setCloseOnMaskClick] = useState(true)
    return (
      <>
        <List.Item>
          <Space justify="between" block align="center">
            <Button
              block
              onClick={() => {
                setVisible(true)
              }}
            >
              超长文本
            </Button>
            <Space align="center">
              点击蒙层是否关闭
              <Switch checked={closeOnMaskClick} onChange={(v) => setCloseOnMaskClick(v)} />
            </Space>
          </Space>
        </List.Item>
        <Dialog
          visible={visible}
          closeOnMaskClick={closeOnMaskClick}
          title="English"
          content="Exercitation eu magna est ex nulla sint culpa quis nulla velit officia laborum mollit. Cillum enim sit deserunt minim esse in ex velit cupidatat consectetur sit deserunt do commodo cillum. Reprehenderit sunt dolore amet minim nisi occaecat excepteur consectetur. Cillum in tempor elit deserunt labore reprehenderit deserunt excepteur voluptate nostrud. Nisi magna id consequat veniam consectetur. Aute ipsum et sunt do consequat cillum consectetur mollit aute ipsum minim fugiat. Sunt deserunt ipsum consequat non eiusmod anim nulla. Irure laborum reprehenderit laborum est est ea non laboris laborum sunt dolor excepteur mollit sint. Ullamco veniam irure sit et sit quis. In sit fugiat consectetur non consectetur aliquip. Consequat elit reprehenderit proident nostrud amet tempor enim laboris. Eu veniam deserunt in nisi sint tempor nisi Lorem labore officia. Anim elit ad proident laborum ullamco sit ullamco elit do sunt dolor ipsum nulla laborum. Amet sit quis proident ad. Aliqua deserunt esse cillum officia laboris minim reprehenderit adipisicing. Ea mollit laborum ex incididunt qui reprehenderit. Eiusmod incididunt consectetur pariatur aliquip id dolor mollit est adipisicing nisi. Ea minim irure ut sint cupidatat sit nostrud eiusmod esse dolore labore ullamco elit. Aliqua sunt magna cillum in elit Lorem voluptate laboris et nulla veniam consectetur dolore aliqua. Consectetur laborum ullamco cillum ut voluptate. Nulla consequat magna cillum irure. Enim reprehenderit ea aliqua nostrud ullamco labore esse excepteur duis aliqua aliqua adipisicing culpa irure velit. Sint amet sunt eu velit et officia veniam reprehenderit sint dolore laborum aliquip officia esse elit. Commodo minim amet reprehenderit do laborum aute est elit tempor officia commodo exercitation duis nisi exercitation. Est quis eiusmod non aliquip consequat consequat elit eiusmod incididunt excepteur ullamco eu occaecat. Dolor dolore veniam eu voluptate duis nulla Lorem commodo amet non quis ipsum cillum laboris ex. Labore consequat sunt ex dolore. Magna ad tempor pariatur duis. Do ullamco enim amet ipsum consectetur. Esse ullamco cillum eiusmod Lorem labore laborum ex elit excepteur elit Lorem. Velit nulla aute eiusmod do. Mollit sit minim nostrud labore ad consectetur velit proident pariatur velit amet reprehenderit mollit eiusmod. Minim voluptate officia veniam fugiat nisi veniam est consequat. Excepteur ipsum in ex ullamco aute et dolore dolor aliquip. Deserunt voluptate labore minim. Enim pariatur id ipsum eiusmod eu tempor cupidatat eiusmod ullamco. Incididunt pariatur laborum consectetur velit laborum occaecat tempor sint consequat ut. Consequat anim adipisicing aute quis pariatur laborum adipisicing sunt dolore magna ad minim exercitation fugiat. Qui occaecat ad dolor aliquip est tempor. Mollit culpa cillum nulla eiusmod occaecat cupidatat ex excepteur labore minim et. Aliqua ex officia enim eu veniam occaecat adipisicing est cupidatat ea. Dolore proident aliquip sunt cillum enim nulla culpa anim commodo dolore proident laboris. Est eiusmod eiusmod commodo consequat nostrud Lorem ex est nisi ex occaecat anim. Et velit eiusmod officia nisi laboris ex eu nisi enim."
          closeOnAction
          onClose={() => {
            setVisible(false)
          }}
          onAction={(action, index) => { console.info(action, index) }}
          actions={[{
            key: 'alert',
            text: '我知道了',
          }]}
        />
      </>
    )
  }

  return (
    <>
      <DemoBlock title="基础用法">
        <Space block direction="vertical">
          <BaseUsedOne />
          <Divider />
          <BaseUsedTwo />
          <Divider />
          <BaseUsedThr />
          <Divider />
          <BaseUsedFour />
        </Space>
      </DemoBlock>
    </>
  )
}
